<template>
	<view class="myswitch">
		<view class="uswitch_p" @click.stop="switch_click()" v-if="switch_mode == 'default'">
			<view class="uswitch" :class="{ on: switchon == 1 }" :style="[mystyle]">
				<view class="slide_view" :style="[slidestyle, { left: switchon == 1 ? `${width - height}rpx` : '0rpx' }]">
					<view class="v"></view>
				</view>
			</view>
		</view>

		<view class="select_txt" v-if="switch_mode == 'select_txt'">
			<view class="select_txt_view" :class="{ on: switchon == 0 }" @click.stop="switch_click(0)">关</view>

			<view class="select_txt_view" :class="{ on: switchon == 1 }" @click.stop="switch_click(1)">开</view>
		</view>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myswitch',
	props: {
		switch_mode: {
			type: [String],
			default: 'default',
		},
		show_txt: {
			type: [Boolean],
			default: false,
		},

		switchon: {
			type: [Number, String],
			default: 0,
		},
		item: {
			type: [Object],
			default: {},
		},
		index: {
			type: [Number, String],
			default: 0,
		},
		width: {
			type: [Number, String],
			default: '82',
		},
		height: {
			type: [Number, String],
			default: '42',
		},
		padding: {
			type: [Number, String],
			default: '4',
		},

		// txt_config: {
		// 	default: {
		// 		'on': '已开启',
		// 		'un': '未开启'
		// 	}
		// }
		// bg: {
		// 	type: [String],
		// 	default: '#EBEDF3'
		// },
		// bg_on: {
		// 	type: [String],
		// 	default: '#1FD1C2'
		// }
	},
	data() {
		return {};
	},
	beforeCreate() {},
	created() {},
	mounted() {},
	computed: {
		mystyle() {
			return {
				width: `${this.width}rpx`,
				height: `${this.height}rpx`,
				// padding: `${this.padding}rpx`,
				borderRadius: `${this.height / 2}rpx`,
			};
		},
		slidestyle() {
			return {
				width: `${this.height}rpx`,
				height: `${this.height}rpx`,
				padding: `${this.padding}rpx`,
				// borderWidth: `${this.padding}rpx`,
				// borderStyle: `solid`,
			};
		},
	},
	methods: {
		switch_click(v = -1) {
			let _this = this;
			let value = _this.switchon;
			if (v > -1) {
				value = v;
			}
			this.$emit('switch_click', { item: _this.item, value, index: _this.index });
		},
	},
	watch: {},
};
</script>

<style lang="scss">
// 页面样式
.uswitch_p {
}

.uswitch {
	// width: var(--width);
	// height: var(--height);
	// border-radius: calc(var(--height) / 2);
	background-color: #ebedf3;
	position: relative;
	transition: background-color 0.4s ease;

	.txt {
		font-size: 20rpx;
		font-weight: 400;
		color: #ffffff;
	}

	.slide_view {
		position: absolute;
		top: 0;

		display: flex;
		background-color: #ebedf3;
		border-radius: 50%;
		transition: background-color 0.4s ease, left 0.4s ease, right 0.4s ease;
		box-sizing: border-box;

		.v {
			background-color: #fff;
			flex: 1;
			border-radius: 50%;
		}
	}

	&.on {
		background-color: #1fd1c2;

		.slide_view {
			right: 0;
			background-color: #1fd1c2;
		}
	}

	// .slide_view {
	// 	position: absolute;
	// 	top: 0;

	// 	display: block;
	// 	background: #fff;
	// 	border-radius: 50%;
	// 	border-color: #EBEDF3;
	// 	transition: border-color 0.4s ease, right 0.4s ease;
	// 	box-sizing: border-box;
	// }

	// &.on {
	// 	background: #1FD1C2;

	// 	.slide_view {
	// 		right: 0;
	// 		border-color: #1FD1C2;
	// 	}
	// }
}

.select_txt {
	height: 60rpx;
	border-radius: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	.select_txt_view {
		height: 100%;
		width: 94rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 33rpx;
	}
}
</style>
